<template>
  <div class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="col-md-12">
      <form @submit.prevent="save()" accept-charset="UTF-8" class="form m-t" id="dataForm" method="post">
        <input name="id" type="hidden" v-model="item.id"/>
        <input name="token" type="hidden" v-model="item.uuidToken"/>
        <input :value="newFlag!=0?0:1" name="newFlag" type="hidden"/>
        <div class="col-sm-6">
          <div class="form-group clearfix">
            <label class="col-md-2 control-label" for="bean-code">编码</label>
            <div class="col-md-8">
              <input aria-invalid="true" aria-required="true" class="form-control" id="bean-code" maxlength="55" name="code" placeholder="请输入编码" required="" type="text" v-model="item.code"/>
              <span class="help-block"></span>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-2 control-label" for="bean-name">名称</label>
            <div class="col-md-8">
              <input aria-invalid="true" aria-required="true" class="form-control" id="bean-name" maxlength="55" name="name" placeholder="请输入名称" required="" type="text" v-model="item.name"/>
              <span class="help-block"></span>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-2 control-label" for="bean-memo">备注</label>
            <div class="col-md-8">
              <input aria-invalid="true" class="form-control" id="bean-memo" maxlength="255" name="memo" placeholder="备注" type="text" v-model="item.memo">
              <span class="help-block"></span>
            </div>
          </div>
        </div>
        <div class="col-sm-6">
          <div class="form-group clearfix">
            <label class="col-md-12 control-label">父级节点</label>
            <div class="col-md-12">
              <ul class="ztree" id="tree"></ul>
            </div>
            <div id="treeFormContent">
              <input id="bean-parentId" name="parentId" type="hidden" v-model="item.parentId"/>
            </div>
          </div>
        </div>
        <div class="col-sm-12">
          <div style="width: 200px;margin: 0 auto;">
            <input class="btn btn-primary" type="submit" value="保存"/> | <a @click="lbox.closeMyBoxLayer()" class="btn btn-danger" href="javascript:">返回</a>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>
<script type="text/javascript">
  import '@/assets/css/style.css'

  import $ from '@/assets/js/jquery-vendor.js'
  import 'jquery.cookie'
  import axios from 'axios'
  import '@/assets/js/validate/validation-vendor.js'
  import 'ztree'
  import '@/assets/css/zTree.css'
  import {$storage, apiUtil, axiosContentType, site, zTreeBridge} from '@/assets/js/boss'

  let zTreeObj;
  export default {
    data() {
      return {
        item: {}, newFlag: 0, uuidToken: ''
      }
    },
    mounted() {
      let that = window.$vueApp = this;
      document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
      that.staff.init(() => {
        $('#dataForm').validate();
        that.tree(function () {
          that.newFlag = $storage.getItem(site.sysVariable.info);
          that.uuidToken = apiUtil.guid();
          if (apiUtil.existSessionKey(site.sysVariable.info)) {
            that.info();
          }
        });
      });
    },
    methods: {
      tree(_callback) {
        let that = this;
        axios.post(site.sysVariable.tree, {}, axiosContentType.xWwwFormUrlencoded).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            zTreeObj = $.fn.zTree.init($('#tree'), {
              check: zTreeBridge.radio, callback: {onCheck: that.onCheck}
            }, zTreeBridge.getAndSetTreeRoot(result.data));
            zTreeObj.expandAll(true);
          } else {
            alert(result.message);
          }
          _callback && _callback();
        }, 'json');
      },
      onCheck(e, treeId, treeNode) {
        console.info('========' + (treeNode && treeNode.id) + '==========' + treeNode.checked)
        if (treeNode.checked) {
          this.item.parentId = (treeNode && treeNode.id);
          $('#bean-parentId').val((treeNode && treeNode.id));
        } else {
          this.item.parentId = null;
          $('#bean-parentId').val('');
        }
      },
      info() {
        let that = this;
        axios.post(site.sysVariable.info + $storage.getItem(site.sysVariable.info), {}).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            that.item = result.data;
            zTreeBridge.zTreeHistNode(zTreeObj, that.item.parentId, zTreeObj.getNodes());
            if (zTreeObj.getNodes()) {
              zTreeBridge.zTreeObjChkDisabled(zTreeObj, zTreeObj.getNodeByParam('id', that.item.id));
            }
          } else {
            alert(result.message);
          }
        });
      },
      save() {
        let that = this;
        if ($('#dataForm').valid()) {
          axios.post(site.sysVariable.save, $('#dataForm').serialize()
            , axiosContentType.xWwwFormUrlencoded).then(function (response) {
            const result = response.data;
            if (result.code === 0) {
              parent.$vueApp.refresh();
              alert('保存成功!');
              that.lbox.closeMyBoxLayer()
            } else {
              alert(result.message);
            }
          });
        }
      }
    }
  }
</script>

